/* eslint-disable no-empty-pattern */
import type { UserConfig } from 'unocss'

import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
import presetRemToPx from '@unocss/preset-rem-to-px'
import { resolve } from 'node:path'
import {
    defineConfig,
    toEscapedSelector as e,
    presetAttributify,
    presetIcons,
    presetMini,
    presetTagify,
    presetTypography,
    presetWebFonts,
    transformerCompileClass,
    transformerDirectives,
    transformerVariantGroup,
} from 'unocss'

import { colors } from './colors'

export default defineConfig({
    content: {
        pipeline: {
            include: [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html|ts)($|\?)/],
        },
    },
    presets: [
        presetAttributify(),
        presetTypography(),
        presetWebFonts(),
        // !presetUno 有 bug, 改用 presetMini
        // presetUno({ attributify: true, dark: 'class' }),
        // presetUno(),
        presetMini(),
        presetTagify(),
        presetRemToPx({
            baseFontSize: 4,
        }),
        presetIcons({
            // unocss 自定义本地图标, 和 unplugin-icons 冗余
            collections: {
                custom: FileSystemIconLoader(resolve(__dirname, 'packages/assets/svgs'), svg => svg.replace(/^<svg /, '<svg fill="currentColor" ')),
            },
            extraProperties: {
                'display': 'inline-block',
                'vertical-align': 'sub',
            },
            prefix: 'i-',
        }),
    ],
    rules: [
        [
            /^overflow-ellipsis$/,
            ([], { rawSelector }) => {
                const selector = e(rawSelector)
                return `
                    ${selector} {
                    text-overflow: ellipsis;
                    }
                `
            },
        ],
        [
            /^custom-hover$/,
            ([], { rawSelector }) => {
                const selector = e(rawSelector)
                return `
                    ${selector} {
                    display: flex;
                    height: 100%;
                    padding: 1px 10px 0;
                    cursor: pointer;
                    align-items: center;
                    transition: background var(--transition-time-02);
                    }
                    /* you can have multiple rules */
                    ${selector}:hover {
                    background-color: var(--top-header-hover-color);
                    }
                    .dark ${selector}:hover {
                    background-color: var(--el-bg-color-overlay);
                    }
                `
            },
        ],
        [
            /^layout-border__left$/,
            ([], { rawSelector }) => {
                const selector = e(rawSelector)
                return `
                    ${selector}:before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 1px;
                    height: 100%;
                    background-color: var(--el-border-color);
                    z-index: 3;
                    }
                `
            },
        ],
        [
            /^layout-border__right$/,
            ([], { rawSelector }) => {
                const selector = e(rawSelector)
                return `
                    ${selector}:after {
                    content: "";
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 1px;
                    height: 100%;
                    background-color: var(--el-border-color);
                    z-index: 3;
                    }
                `
            },
        ],
        [
            /^layout-border__top$/,
            ([], { rawSelector }) => {
                const selector = e(rawSelector)
                return `
                    ${selector}:before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 1px;
                    background-color: var(--el-border-color);
                    z-index: 3;
                    }
                `
            },
        ],
        [
            /^layout-border__bottom$/,
            ([], { rawSelector }) => {
                const selector = e(rawSelector)
                return `
                    ${selector}:after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 1px;
                    background-color: var(--el-border-color);
                    z-index: 3;
                    }
                `
            },
        ],
    ],
    theme: {
        breakpoints: {
            '1k2': '1200px',
            '1k5': '1500px',
        },
        colors,
    },
    transformers: [
        transformerCompileClass(),
        transformerDirectives(),
        transformerVariantGroup(),
    ],
}) as UserConfig<any>
